<template>
	<view class="wmDosage-wrap" v-if="recipeDetail">
		<u-select-goods :data="recipeDetail" type="1"  @onChange="selectGoodsChange"></u-select-goods>
		<view class="wmDosage-form">
			<uni-forms label-width="100" :rules="rules" :value="recipeDetail" ref="form" err-show-type="toast">
				
				
				<uni-forms-item label="用药频率" name="frequency" >
					<picker mode="selector" :range="frequencyList"  @change="frequencyChange" :value="recipeDetail.frequency">
						<view class="item-right">
							<view v-if="!recipeDetail.frequency" class="item-right-select">请选择用药频率</view>
							<image v-if="!recipeDetail.frequency" class="item-right-next" src="http://k8s.vendingtech.vip/images/next_icon@2x.png"></image>
							<view v-if="recipeDetail.frequency" class="item-right-value">{{ recipeDetail.frequency}}</view>
						</view>
					</picker>
				</uni-forms-item>

				<uni-forms-item label="单次用量" name="onceDosage">
					<view class="flex-row-end">
						<uni-easyinput @input="checkDisabledBtn" type="text" v-model="recipeDetail.onceDosage" placeholder="请输入单次用量" />
						<view style="padding-left: 16rpx;line-height: 36px;">{{smallUnitName ? smallUnitName + '/次' : ''}}</view>
					</view>
				</uni-forms-item>
				
				
				<uni-forms-item label="用药方法" name="useMethod" >
					<picker mode="selector" :range="useMethodList"  @change="useMethodChange" :value="recipeDetail.useMethod">
						<view class="item-right">
							<view v-if="!recipeDetail.useMethod" class="item-right-select">请选择用药方法</view>
							<image v-if="!recipeDetail.useMethod" class="item-right-next" src="http://k8s.vendingtech.vip/images/next_icon@2x.png"></image>
							<view v-if="recipeDetail.useMethod" class="item-right-value">{{ recipeDetail.useMethod}}</view>
						</view>
					</picker>
				</uni-forms-item>
				
				<uni-forms-item label="药量天数" name="totalCharge">
					<view class="flex-row-end">
						<uni-easyinput @input="checkDisabledBtn" type="text" v-model="recipeDetail.totalCharge" placeholder="请输入用药的天数" />
						<view style="padding-left: 16rpx;line-height: 36px;">天</view>
					</view>
				</uni-forms-item>
				
				<uni-forms-item label="医嘱" name="remark" :borderBottom="false"></uni-forms-item>
				<textarea
					@input="checkDisabledBtn"
					placeholder-class="textarea-place"
					:maxlength="1000"
					class="editPresc-form-text"
					v-model="recipeDetail.remark"
					placeholder="请填写药品医嘱"
				/>
			</uni-forms>
		</view>

		<u-bottom-button value="确定用量" :disabled="disabled" @click="formSubmit"></u-bottom-button>
	</view>
</template>

<script>
import uBottomButton from '@/components/u-bottom-button/u-bottom-button.vue';
import uSelectGoods from '@/components/u-select-goods/u-select-goods.vue';
import uniEasyinput from '@/components/uni/uni-easyinput/uni-easyinput.vue';
import uniForms from '@/components/uni/uni-forms/uni-forms.vue';
import uniFormsItem from '@/components/uni/uni-forms-item/uni-forms-item.vue';
import { mapState, mapMutations } from 'vuex';
export default {
	components: {
		uniForms,
		uniFormsItem,
		uniEasyinput,
		uBottomButton,
		uSelectGoods
	},
	computed: {
		...mapState({
			recipeDetailDTO: state => state.recipeForm.recipeDetailDTO
		})
	},
	data() {
		return {
			goodsId: null,
			disabled: true,
			goodsInfo: null,
			rules: {
				
				frequency: {
					rules: [
						{
							required: true,
							message: '请填写用药频率'
						}
					]
				},
				onceDosage: {
					rules: [
						{
							required: true,
							message: '请填写单次用量'
						}
					]
				},
				useMethod: {
					rules: [
						{
							required: true,
							message: '请填写用药方法'
						}
					]
				},
				totalCharge: {
					rules: [
						{
							required: true,
							message: '请填写药量天数'
						},
						{
							pattern: "^[1-9]\\d*$",
							errorMessage: '用药数量必须为数字'
						}
					]
				},
			},

			recipeDetail: null,
			recipeDetailIndex: null,
			frequencyList:[],//用药频率列表
			useMethodList:[],//用药方法列表
			
			smallUnitName: '', // 用量单位
		};
	},
	onLoad(option) {
		this.goodsId = option.goodsId;
		this.queryDictItemsByCode("frequency","frequencyList")
		this.queryDictItemsByCode("useMethod","useMethodList")
	},
	onShow() {
		this.queryCommodityById();
	},
	methods: {
		...mapMutations({
			setRecipeDetailDTO: 'setRecipeDetailDTO'
		}),
		// 校验按钮
		checkDisabledBtn() {
			if (
				this.recipeDetail.buyNum > 0 &&
				this.recipeDetail.frequency &&
				this.recipeDetail.onceDosage &&
				this.recipeDetail.totalCharge &&
				this.recipeDetail.remark &&
				this.recipeDetail.useMethod
			) {
				this.disabled = false;
			} else {
				this.disabled = true;
			}
		},
		//校验表单
		formSubmit(type) {
			this.$refs.form
				.submit()
				.then(res => {
					this.confirmDosage();
				})
				.catch(err => {
					console.log('表单错误信息：', err);
				});
		},

		selectGoodsChange(e) {
			this.recipeDetail.buyNum = e;
			this.checkDisabledBtn();
		},
		//选择用药频率
		frequencyChange(e){
			this.recipeDetail.frequency = this.frequencyList[e.detail.value]
			this.checkDisabledBtn()
		},
		//选择用药方法
		useMethodChange(e){
			this.recipeDetail.useMethod = this.useMethodList[e.detail.value]
			this.checkDisabledBtn()
		},
		//字典查询
		queryDictItemsByCode(code,list) {
			this.$api
				.queryDictItemsByCode({
					params: {
						code: code
					}
				})
				.then(res => {
					res.forEach(key => {
						this[list].push(key.text);
					});
		
				});
		},
		//确定用量
		confirmDosage() {
			this.recipeDetail.commodityId = this.recipeDetail.id;
			this.recipeDetail.commodityNum = this.recipeDetail.buyNum;

			if (this.recipeDetailIndex != null) {
				this.recipeDetailDTO[this.recipeDetailIndex] = this.recipeDetail;
			} else {
				this.recipeDetailDTO.push(this.recipeDetail);
			}

			this.setRecipeDetailDTO(this.recipeDetailDTO);
			uni.navigateBack({
				delta: 1
			});
		},

		//商品详情
		queryCommodityById() {
			this.$api
				.queryCommodityById({
					params: {
						id: this.goodsId
					}
				})
				.then(res => {
					if (res.code == 200) {
						this.smallUnitName = res.result.westernDrugVO ? res.result.westernDrugVO.smallUnitName : ''
						this.goodsInfo = res.result;
						//获取缓存中的表单信息
						this.recipeDetailDTO.forEach((key, index) => {
							if (key.id == this.goodsId) {
								this.recipeDetail = key;
								this.recipeDetailIndex = index;
							}
						});
						//缓存中没有就使用当前的
						if (!this.recipeDetail) {
							this.goodsInfo.buyNum = 1;
							this.recipeDetail = {
								...this.goodsInfo,
								commodity: {
									...this.goodsInfo
								},
								frequency: '', //用药频率
								onceDosage: '', //单次用量
								remark: '', //医嘱
								useMethod: '' ,//用药方法
								totalCharge: '', //药量天数
							};
						}

						this.checkDisabledBtn();
					} else {
						uni.showToast({
							title: res.message,
							icon: 'none'
						});
					}
				});
		}
	}
};
</script>

<style lang="less">
@import './wmDosage.less';
</style>
